/* * @Author: hhy * @Date: 2019-01-31 15:38:18 * @Last Modified by: hhy * @Last
Modified time: 2019-04-16 17:45:25 * @文件说明: 无边框的下拉框 */
<template>
  <el-select
    :class="{ 'no-border': !showBorder }"
    :value="value"
    @change="change"
    v-bind="$attrs"
    :style="style"
    class="all-select"
    size="large"
  >
    <el-option
      v-for="i in option"
      :key="i.value"
      :label="i.label"
      :value="i.value"
      :disabled="i.disabled"
    />
  </el-select>
</template>

<script>
import { defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  name: "all-select",
  model: {
    event: "change",
  },
  props: {
    query: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    option: {
      type: Array,
      default() {
        return [
          {
            label: "显示",
            value: 0,
          },
          {
            label: "隐藏",
            value: 1,
          },
        ];
      },
    },
    width: {
      type: String,
      default: "",
    },
    showBorder: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["change"],
  computed: {
    style() {
      return {
        width: this.width + "px",
      };
    },
  },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const change = (val) => {
      if (props.query) {
        router.push({
          path: route.path,
          query: {
            ...route.query,
            [props.query]: val,
            page: 1,
          },
        });
      } else {
        context.emit("change", val);
      }
    };
    return {
      change,
    };
  },
});
</script>

<style lang="scss" scoped>
.no-border {
  ::v-deep() {
    .el-input {
      .el-input__inner {
        padding-left: 0;
        padding-right: 15px;
        border: none;
        color: inherit;
        text-align: right;
        background-color: transparent;
        &::-webkit-input-placeholder {
          @include c9;
        }
      }
      .el-input__suffix {
        right: -5px;
      }
    }
    .is-disabled {
      .el-input__inner {
        cursor: default;
      }
      .el-input__suffix {
        display: none;
      }
    }
  }
}
</style>
